<template>
    <div class="home-mobile">
        <div class="mobile-swiper">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="(item,idx) of swiperList" :key="idx"
                    :style="{backgroundImage:`url(${item.bgImg})`}"
                    >
                    <div class="swiper-slide-center">
                        <div class="swiper-slide-title">{{ item.title }}</div>
                        <div class="swiper-slide-details">{{ item.details }}</div>
                    </div>
                    </div>
                </div>
                <div class="swiper-pagination"></div>
            </div>
        </div>
        <div class="mobile-center">
            <div class="center-head">
                <div class="flex_bet center-head-top">
                    <div class="center-head-top-content">
                        <div class="content-gn"></div>
                        <div class="content-e">ABOUT US</div>
                        <div class="content-title">品达集团</div>
                    </div>
                    <div class="center-head-top-r"></div>
                </div>
                <p class="center-head-details">
                    杭州品达集团，做AIGC时代领跑者！公司旗下智企云平台系列产品服务以AIGC人工智能为开发方向，致力于为中国中小型企业打造属于自己的数智员工，为各行各业提供数字化转型及降本提质增效的解决方案。
                </p>
                <!-- <vs-button 
                    style="background: linear-gradient(90deg, #006FFF 0%, #60DCA7 100%);
                        font-size: 18px;
                        padding: 4px 0;
                        width: 140px;
                        position: relative;
                        top: -10px;
                        left: 15px;
                        ">
                        了解更多
                </vs-button> -->
                <div class="flex_bet center-head-data">
                    <div class="center-head-data-l"></div>
                    <div class="center-head-data-r">
                        <div class="flex_start center-head-data-r-details " style="margin-top: 20px;">
                            <div class="center-head-data-r-details-icon"><i class="iconfont icon-gongsi"></i></div>
                            <div class="center-head-data-r-details-content">
                                <p><span>3</span>家</p>
                                <p>分公司</p>
                            </div>
                        </div>
                        <div class="flex_start center-head-data-r-details">
                            <div class="center-head-data-r-details-icon"><i class="iconfont icon-yunyingzhongxin"></i></div>
                            <div class="center-head-data-r-details-content">
                                <p><span>4</span>家</p>
                                <p>运营中心</p>
                            </div>
                        </div>

                        <div class="flex_start center-head-data-r-details">
                            <div class="center-head-data-r-details-icon"><i class="iconfont icon-zhuanli"></i></div>
                            <div class="center-head-data-r-details-content">
                                <p><span>100</span>+</p>
                                <p>专利 / 商标</p>
                            </div>
                        </div>

                        <div class="flex_start center-head-data-r-details" style="margin-bottom: 20px;">
                            <div class="center-head-data-r-details-icon"><i class="iconfont icon-shangwuhezuo"></i></div>
                            <div class="center-head-data-r-details-content">
                                <p><span>1200</span>+</p>
                                <p>合作伙伴</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="center-services">
                <div class="services-head">
                    <div class="services-head-gn"></div>
                    <div class="services-head-e">WHAT CAN WE DO</div>
                    <div class="services-head-title">产品服务</div>
                </div>
                <div class="services-list">
                    <div @click="skipping(item)" class="services-list-item flex_bet" v-for="(item,idx) of servicesList" :key="idx"
                    :style="{backgroundImage:`url(${item.bgImg})`}"
                    >
                        <div class="services-list-item-l">
                            <div class="services-list-item-l-title">{{ item.title }}</div>
                            <div class="services-list-item-l-details">{{ item.details.toLocaleUpperCase() }}</div>
                        </div>
                        <div class="services-list-item-r flex_cen">
                            <i class="el-icon-right"></i>
                        </div>
                    </div>
                </div>
                <!-- <vs-button 
                    style="background: linear-gradient(90deg, #006FFF 0%, #60DCA7 100%);
                        font-size: 18px;
                            padding: 4px 0;
                            width: 90%;
                            margin: 0 auto;
                            border-radius: 100px;
                        ">
                        了解更多
                </vs-button> -->
            </div>
            <Footer></Footer>
        </div>
    </div>
</template>
<script>
import Footer from '@/components/footer/index1.vue';
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.min.css'
export default {
    components: { Footer },
    data(){
        return{
            swiperList:[
                {
                    bgImg: 'https://static.pdwl.net/jituan/images/mobile/home/icon2.png',
                    title:'AIGC时代',
                    details:'每一家企业都需要一个数字员工'
                },
                {
                    bgImg: 'https://static.pdwl.net/jituan/images/mobile/home/icon8.png',
                    title:'牛视3.0',
                    details:'全新升级，为优秀操盘手倾力打造'
                },
                {
                    bgImg: 'https://static.pdwl.net/jituan/images/mobile/home/icon9.png',
                    title:'智企云平台',
                    details:'探索无限可能，一触即发'
                },
                {
                    bgImg: 'https://static.pdwl.net/jituan/images/mobile/home/icon10.png',
                    title:'全球合伙人计划',
                    details:'顺势而为，乘势而动'
                },
            ],
            servicesList: [
                {
                    bgImg: 'https://static.pdwl.net/jituan/images/mobile/home/icon4.png',
                    title:'智企云平台',
                    details:'Intelligent enterprise cloud platform',
                    router:"digitalEmployee",
                    idx:3
                },
                {
                    bgImg: 'https://static.pdwl.net/jituan/images/mobile/home/icon5.png',
                    title:'牛视3.0',
                    details:'BullVision 3.0',
                    router:"bovineVision",
                    idx:1
                },
                {
                    bgImg: 'https://static.pdwl.net/jituan/images/mobile/home/icon6.png',
                    title:'易播数字人',
                    details:'Hi Tuan Digital People',
                    router:"digitalMan",
                    idx:2
                },
                {
                    bgImg: 'https://static.pdwl.net/jituan/images/mobile/home/icon7.png',
                    title:'城市合伙人',
                    details:'City Partners',
                    router:"channel",
                },

            ]
        }
    },  
    mounted() {
        var wow = new this.$WOW({
            boxClass: 'wow',
            animateClass: 'animated',
            offset: 0,
            mobile: false,
            live: true,
            scrollContainer: null
        })
        wow.init();
        this.initSwiper()

    },
    methods: {
        initSwiper() {
            let mySwiper = new Swiper('.swiper-container', {
                loop: true,
                autoplay: {
                    delay: 3000,//时间 毫秒
                    disableOnInteraction: false,//用户操作之后是否停止自动轮播默认true
                    pauseOnMouseEnter: true,
                },
                // slidesPerView: 7,
                // centeredSlides: true,
                // loop: true,
                grabCursor: true,
                pagination: {
                    el: ".swiper-pagination",
                },
            })
            //6.6.2之前的版本需要通过代码实现此功能
            mySwiper.el.onmouseover = function () {
                mySwiper.autoplay.stop();
            }
            mySwiper.el.onmouseout = function () {
                mySwiper.autoplay.start();
            }
        },
        skipping(item){
            this.$store.commit('setSolutionType', item.idx)
            this.$router.push({ path: "/"+item.router })
        }
    }
}

</script>
<style lang="scss" scoped>
.home-mobile {
    .mobile-swiper {
        overflow: hidden;

        .swiper-container{
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;
            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
            position: relative;
            height: 960px;
            width: 100%;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            &-center{
                position: absolute;
                top: 280px;
                left: 80px;
                color: #FFFFFF;
                text-align: left;
                .swiper-slide-title{
                    font-size: 64px;
                    font-weight: bold;
                }
                .swiper-slide-details{
                    font-size: 42px;
                    margin-top: 20px;
                }
            }
        }
        ::v-deep .swiper-pagination-bullet{
            background: #ffffff77 ;
        }
        ::v-deep .swiper-pagination-bullet-active{
            background: #fff;
        }
    }
    .mobile-center{
        .center-head{
            &-top{
                &-content{
                    background-image: url("https://static.pdwl.net/jituan/images/mobile/home/icon.png");
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                    width: 320px;
                    height: 310px;
                    display: flex;
                    flex-direction: column;
                    margin-left: 40px;
                    align-content: center;
                    justify-content: center;
                    .content-gn{
                        width: 60px;
                        height: 4px;
                        background: linear-gradient(90deg, #62DEA6 0%, #006AF3 100%);
                    }
                    .content-e{
                        font-size: 24px;
                        color: #B6B6B6;
                        margin-top: 24px;
                    }
                    .content-title{
                        font-size: 48px;
                        font-weight: bold;
                        color: #121212;
                    }
                }
                .center-head-top-r{
                    background-image: url("https://static.pdwl.net/jituan/images/mobile/home/icon1.png");
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                    width: 240px;
                    height: 240px;
                }
            }
            .center-head-details{
                font-size: 28px;
                font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                font-weight: 400;
                color: #484848;
                margin: 0px 40px 0 40px;
                line-height: 44px;
                position: relative;
                top: -50px;
            }
            .center-head-data{
                margin-top: 40px;
                background: #fff;
                &-l{
                    background-image: url("https://static.pdwl.net/jituan/images/mobile/home/icon3.png");
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                    width: 416px;
                    height: 537px;
                }
                &-r{
                    width: calc(100% - 416px - 52px);
                    &-details{
                        margin-top: 40px;
                        &-icon{
                            i{

                                font-size: 68px;
                            }
                            margin-right: 13px;
                            align-self: flex-start;
                        }
                        &-content{
                            p{
                                margin: 0;
                                padding: 0;
                                font-size: 28px;
                                color: #121212;
                                line-height: 36px;
                            }
                            span{
                                font-size: 48px;
                                color: #121212;
                                font-weight: bold;
                            }
                        }
                    }
                }
            }
        }
        .center-services{
            height: 100%;
            background: #F4F7FE;
            padding: 80px 40px;
            .services-head{
                &-gn{
                    width: 60px;
                    height: 4px;
                    background: linear-gradient(90deg, #62DEA6 0%, #006AF3 100%);
                }
                &-e{
                    font-size: 24px;
                    color: #B6B6B6;
                    margin-top: 24px;
                }
                &-title{
                    font-size: 48px;
                    font-weight: bold;
                    color: #121212;
                }
            }
            .services-list{
                margin: 40px 0 80px;
                &-item{
                    height: 200px;
                    margin-bottom: 20px;
                    padding: 0 60px;
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                    &-l{
                        color: #FFFFFF;
                        &-title{
                            font-size: 32px;
                            line-height: 28px;
                        }
                        &-details{
                            font-size: 20px;
                            line-height: 28px;
                            color: #ffffffab;
                            margin-top: 18px;
                        }
                    }
                    &-r{
                        width: 56px;
                        height: 56px;
                        background: rgba(255,255,255,0.12);
                        opacity: 1;
                        border: 1px solid #FFFFFF;
                        border-radius: 50%;
                        i{
                            color: #fff;
                        }
                    }
                }

            }
        }
    }
}
</style>
